/* eslint-disable react-refresh/only-export-components */
import type { FC } from 'react'
import { useLoaderData } from 'react-router-dom'
import { Table } from 'antd'
import type { TableProps } from 'antd'
import { getMovieList } from '@/api/movie-api.ts'

// 表格的列配置
const columns: TableProps['columns'] = [
  {
    title: '序号',
    render(_, __, index) {
      return index + 1
    }
  },
  { title: '电影名称', dataIndex: 'title' },
  { title: '主演', dataIndex: 'starring' },
  { title: '上映时间', dataIndex: 'pub_date' },
  { title: '评分', dataIndex: 'rate' }
]

const Movie: FC = () => {
  // 获取 loader 返回的数据
  const loaderData = useLoaderData() as { result: BaseResponse<MovieItem[]> }

  return (
    <>
      <Table dataSource={loaderData.result.list} columns={columns} rowKey="id" pagination={false} size="middle" bordered />
    </>
  )
}

export default Movie

// 获取电影列表数据的接口：
// 请求方式 GET
// 请求地址 /api/movies
export const loader = async () => {
  // 请求电影数据
  const result = await getMovieList()
  console.log(result)

  // 把数据交给组件渲染
  return { result }
}
